<!DOCTYPE html>
<html>
<head>
    <!-- <title>Flask Template Example</title> -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="/static/css/bootstrap.min.css" rel="stylesheet" media="screen">
    <link href="/static/css/dropdowns-enhancement.css" rel="stylesheet" media="screen">
    <script type="text/javascript" src="/static/js/plotly-latest.min.js"></script>
    <style type="text/css">
        .container {
            padding-top: 20px;
        }

    </style>

</head>
<body>
<div class="container">
    <form class="control-panel form-horizontal" onsubmit="return false;">
        <div class="form-group">
            <label class="control-label">Filters:</label>
            <div class="filter current">
                <select class="target">
                    {% for key in distinct_param_keys %}
                    <option>{{ key }}</option>
                    {% endfor %}
                </select>
                <select class="filter">
                </select>
                <br/>
            </div>
        </div>
        <div class="form-group">
            <label class="control-label pull-left">X-Axis Attribute: </label>
            <div class="btn-group pull-left" style="margin-left: 10px">
                <button data-toggle="dropdown" class="btn btn-default dropdown-toggle">{{ x_plot_key }}<span
                        class="caret"></span></button>
                <ul class="dropdown-menu">
                    {% for x_plottable_key in x_plottable_keys %}
                    <li>
                        <input type="radio" id="x_plot_key_{{ loop.index0 }}" name="x_plot_key"
                               value="{{ loop.index0 }}"
                               {% if x_plottable_key== x_plot_key %}
                               checked
                               {% endif %}
                        />
                        <label for="x_plot_key_{{ loop.index0 }}">{{ x_plottable_key }}</label>
                    </li>
                    {% endfor %}
                </ul>
            </div>
        </div>
        <div class="form-group">
            <label class="control-label pull-left">Y-Axis Attribute: </label>
            <div class="btn-group pull-left" style="margin-left: 10px">
                <button data-toggle="dropdown" class="btn btn-default dropdown-toggle">{{ plot_key }}<span
                        class="caret"></span></button>
                <ul class="dropdown-menu">
                    {% for plottable_key in plottable_keys %}
                    <li>
                        <input type="radio" id="plot_key_{{ loop.index0 }}" name="plot_key"
                               value="{{ loop.index0 }}"
                               {% if plottable_key== plot_key %}
                               checked
                               {% endif %}
                        />
                        <label for="plot_key_{{ loop.index0 }}">{{ plottable_key }}</label>
                    </li>
                    {% endfor %}
                </ul>
            </div>
        </div>
        <div class="form-group">
            <label class="control-label pull-left">Display Mode</label>
            <div class="btn-group pull-left" style="margin-left: 10px">
                <button data-toggle="dropdown" class="btn btn-default dropdown-toggle">Mean & Std<span
                        class="caret"></span></button>
                <ul class="dropdown-menu">
                    <li>
                        <input type="radio" id="display_mode_0" name="display_mode" value="mean_std" checked/>
                        <label for="display_mode_0">Mean & Std</label>
                    </li>
                    <li>
                        <input type="radio" id="display_mode_1" name="display_mode" value="mean_se"/>
                        <label for="display_mode_1">Mean & SE (Std/sqrt(n))</label>
                    </li>
                    <li>
                        <input type="radio" id="display_mode_2" name="display_mode" value="individual"/>
                        <label for="display_mode_2">Individual</label>
                    </li>
                </ul>
            </div>
        </div>
        <div class="form-group">
            <label class="control-label pull-left">(Figure) Split by:</label>
            <div class="btn-group pull-left" style="margin-left: 10px">
                <button data-toggle="dropdown" class="btn btn-default dropdown-toggle">(None)<span
                        class="caret"></span></button>
                <ul class="dropdown-menu">
                    <li>
                        <input type="radio" id="split_key_0" name="split_key"
                               value="0" checked/>
                        <label for="split_key_0">(None)</label>
                    </li>
                    {% for key in distinct_param_keys %}
                    <li>
                        <input type="radio" id="split_key_{{ loop.index }}" name="split_key"
                               value="{{ loop.index }}"/>
                        <label for="split_key_{{ loop.index }}">{{ key }}</label>
                    </li>
                    {% endfor %}
                </ul>
            </div>
            <label class="control-label pull-left" style="margin-left: 10px">(Series) Split by:</label>
            <div class="btn-group pull-left" style="margin-left: 10px">
                <button data-toggle="dropdown"
                        class="btn btn-default dropdown-toggle">{{ distinct_param_keys[0] }}<span
                        class="caret"></span></button>
                <ul class="dropdown-menu">
                    <li>
                        <input type="radio" id="group_key_0" name="group_key"
                               value="0"/>
                        <label for="group_key_0">(None: split by experiment name)</label>
                    </li>
                    {% for key in distinct_param_keys %}
                    <li>
                        <input type="radio" id="group_key_{{ loop.index }}" name="group_key"
                               value="{{ loop.index }}"
                               {% if key== group_key %}
                               checked
                               {% endif %}
                        />
                        <label for="group_key_{{ loop.index }}">{{ key }}</label>
                    </li>
                    {% endfor %}
                </ul>
            </div>
        </div>
        <div class="form-group ">
            <button class="btn btn-primary update">Update</button>
            <button class="btn btn-info update-s3">Reload S3 & Update</button>
            <span id="status"></span>
        </div>
    </form>
    <div id="plot_wrapper">
        {{ plot_div|safe }}
    </div>
</div>
<script type="text/javascript" src="/static/js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="/static/js/bootstrap.min.js"></script>
<script type="text/javascript" src="/static/js/dropdowns-enhancement.js"></script>
<script type="text/javascript" src="/static/js/jquery.loadTemplate-1.5.6.js"></script>

<script type="text/javascript">
    var plottableKeys = {{ plottable_keys|tojson|safe }};
    var xPlottableKeys = {{ x_plottable_keys|tojson|safe }};
    var distinctParamKeys = {{ distinct_param_keys|tojson|safe }};
    var distinctParams = {{ distinct_params|tojson|safe }};

    function _updatePlotInternal(callback, options) {
        $("#status").html("Updating");

        var $controlPanel = $(".control-panel");
        var xPlotIndex = $controlPanel.find("input[name=x_plot_key]:checked").val();
        var xPlotKey = xPlottableKeys[xPlotIndex];
        var plotIndex = $controlPanel.find("input[name=plot_key]:checked").val();
        var plotKey = plottableKeys[plotIndex];
        var displayMode = $controlPanel.find("input[name=display_mode]:checked").val();
        var splitIndex = $controlPanel.find("input[type=radio][name=split_key]:checked").val();
        var splitKey;
        if (splitIndex == 0) {
            splitKey = null;
        } else {
            splitKey = distinctParamKeys[splitIndex - 1];
        }
        var groupIndex = $controlPanel.find("input[type=radio][name=group_key]:checked").val();
        var groupKey;
        if (groupIndex === 0) {
            groupKey = null;
        } else {
            groupKey = distinctParamKeys[groupIndex - 1];
        }
        var filters = {};
        $.each($("div.filter"), function (itr, div) {
            var val = $(div).find(".filter").val();
            if (val && val.length != 0) {
                filters[$(div).find(".target").val()] = val;
            }
        });
        console.log("updating");
        $.get("/plot_div",
                $.extend({
                    "x_plot_key": xPlotKey,
                    "plot_key": plotKey,
                    "display_mode": displayMode,
                    "split_key": splitKey,
                    "group_key": groupKey,
                    "filters": JSON.stringify(filters),
                }, options),
                function (data) {
                    $("#plot_wrapper").empty().append(data);
                    $("#status").html("Updated");
                    if (callback !== undefined) {
                        callback();
                    }
                });

    }
    function updatePlot(callback) {
        _updatePlotInternal(callback, {});
    }
    function updatePlotS3(callback) {
        _updatePlotInternal(callback, {"reload_s3": true});
    }
    $(function () {
        $("input[type=radio][name=plot_key]").change(function () {
            updatePlot();
        });
        $("input[type=radio][name=x_plot_key]").change(function () {
            updatePlot();
        });
        $("input[type=radio][name=display_mode]").change(function () {
            updatePlot();
        });
        $("input[type=radio][name=split_key]").change(function () {
            updatePlot();
        });
        $("input[type=radio][name=group_key]").change(function () {
            updatePlot();
        });
        $("button.update").click(function () {
            updatePlot();
        });
        $("button.update-s3").click(function () {
            updatePlotS3();
        });
    });
    function updateFilterSelections() {
        var key = $(this).val();
        var select$ = $(this).parent().find("select.filter");
        select$.empty();
        $.each([""].concat(distinctParams[key]), function (itr, v) {
            var text;
            if (v === "") {
                text = "(All)";
            } else {
                text = v;
            }
            select$.append(
                    $("<option />")
                            .attr("value", v)
                            .text(text)
            );
        });
    }
    $("select.target").change(updateFilterSelections);
    var cleanFilter;
    function addFilter() {
        var parent$ = $(this).parent();
        if (parent$.hasClass("current")) {
            parent$.after(cleanFilter.clone(true, true));
            parent$.removeClass("current");
        }
    }
    $("select.filter").change(addFilter);
    $(document).ready(function () {
        updateFilterSelections.call($("select.target"));
        cleanFilter = $(".filter.current").clone(true, true);
        $("#status").html("Ready")
    });

</script>

</body>
</html>
